<template>
    <view class="w-[375px] flex flex-col items-center gap-3 mt-3">
       

        <!-- 底部链接区域 -->
        <view class="bg-yellow-50 w-[375px] m-auto flex flex-col py-1">
            <view class="flex justify-between items-center py-1 px-3 hover:bg-yellow-100 transition-colors duration-200 cursor-pointer" @click="goToServiceNotice">
                <text class="text-[12px] text-yellow-800">用户须知</text>
                <text class="text-[12px] text-yellow-800">查看 <IconFont name="arrow-right" size="10"></IconFont></text>
            </view>
            <!-- <view class="flex justify-between items-center py-1 px-3 hover:bg-yellow-100 transition-colors duration-200 cursor-pointer" @click="goToInformedConsent">
                <text class="text-[12px] text-yellow-800">知情同意书</text>
                <text class="text-[12px] text-yellow-800">查看 <IconFont name="arrow-right" size="10"></IconFont></text>
            </view>
            <view class="flex justify-between items-center py-1 px-3 hover:bg-yellow-100 transition-colors duration-200 cursor-pointer" @click="goToRiskDisclosure">
                <text class="text-[12px] text-yellow-800">风险告知书</text>
                <text class="text-[12px] text-yellow-800">查看 <IconFont name="arrow-right" size="10"></IconFont></text>
            </view>
            <view class="flex justify-between items-center py-1 px-3 hover:bg-yellow-100 transition-colors duration-200 cursor-pointer" @click="goToChargeDescription">
                <text class="text-[12px] text-yellow-800">收费说明</text>
                <text class="text-[12px] text-yellow-800">查看 <IconFont name="arrow-right" size="10"></IconFont></text>
            </view> -->
        </view>

        <!-- 须知条款等 -->
        <view class="flex items-center w-full box-border justify-center gap-2 p-2 bg-white mb-8">
            <nut-checkbox v-model="model" @change="handleChange">
                <text class="text-[12px] text-gray-600">支付即表示同意
                <text class="text-[#41916c]">《用户须知》</text>中的全部条款内容</text>
            </nut-checkbox>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Checkbox } from '@nutui/nutui-taro';
import { IconFont } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
// import checkIcon from '@/assets/ico/check.png'package/mine/index

import { defineModel } from 'vue'
import { AppName } from '@/constants';

// 定义 model 变量（自动关联 props 和事件）
const model = defineModel<boolean>()

// 跳转函数
const goToServiceNotice = () => {
  Taro.navigateTo({
    url: `/package-other/books/service-notice?url=https://anfine.huasun-healthcare.com/note/${AppName}.html`
  });
};

const goToInformedConsent = () => {
  Taro.navigateTo({
    url: '/package-other/books/informed-consent'
  });
};

const goToRiskDisclosure = () => {
  Taro.navigateTo({
    url: '/package-other/books/risk-disclosure'
  });
};

const goToChargeDescription = () => {
  Taro.navigateTo({
    url: '/package-other/books/charge-description'
  });
};

const products = ref([1, 2, 3, 4]);
const videos = ref([1, 2, 3]);
const footerLinks = ref([
    { text: '服务须知' },
    { text: '知情同意书' },
    { text: '风险告知书' },
    { text: '收费说明' }
]);

// const checked = ref(false);
const handleChange = (value: boolean) => {
    // true or false
    // checked.value = value;
    model.value = value
};
</script>
